<template>
  <transition name="fade">
    <div v-show="showMask" class="confirm">
      <div class="confirm-wrapper">
        <span class="pic"></span>
        <div class="notice">您要投票的节目为<br><span class="showName">{{selectName}}</span></div>
        <button type="button" class="btn-primary" @click="voteProgram">投TA一票</button>
        <a href="javascript:void(0);" class="close" @click="closeMask"></a>
      </div>
    </div>
  </transition>
</template>

<script>
	import { voteProgram } from 'api'
  export default {
    name: 'confirm',
    data() {
      return {
        showMask: false
      }
    },
    methods: {
      closeMask() {
        this.showMask = false
      },
      voteProgram() {
        voteProgram(this.$parent.inputName).then((res) => {
        	this.showMask = false
        	this.$parent.refreshPrograms();
        	this.$message({
							message: '感谢您的投票',
							type: 'success'
					})
				}).catch((error) => {
					if(error.response) {
						this.$message({
							message: error.response.data.message,
							type: 'error'
						})
					} else {
						this.$message({
							message: "请求异常",
							type: 'error'
						})
					}
				})
      }
    },
    mounted() {
      this.showMask = this.value
    },
    watch: {
      value(newVal, oldVal) {
        this.showMask = newVal
      },
      showMask(val) {
        this.$emit('input', val)
      }
    },
    props: {
      value: {},
      selectName: String,
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../common/sass/var';
  @import '../../common/sass/mixin';
  .confirm {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.7);
    &.fade-enter-active, &.fade-leave-active {
      transition: all 0.5s
    }
    &.fade-enter, &.fade-leave-active {
      opacity: 0
    }
    .confirm-wrapper {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 280px;
      min-height: 230px;
      padding: 0 0 20px;
      background: #fff;
      border-radius: 6px;
      text-align: center;
      .pic {
        display: block;
        width: 80px;
        height: 106px;
        margin: 20px auto 20px;
        @include bg-image(bee);
        background-size: 80px 106px;
      }
      .showName {
        display: block;
        margin-bottom: 20px;
        color: $color-pink;
      }
      .btn-primary {
        width: 160px;
      }
      .close {
        position: absolute;
        right: 10px;
        top: 10px;
        display: block;
        width: 10px;
        height: 10px;
        @include bg-image(closeBtn);
        background-size: 10px 10px;
      }
    }
  }
</style>
